<template>
    <Dialog modal load-animation cancel-to="/main/normal">
        <template #header>
            <h1 class="header">游戏说明</h1>
        </template>
        <template #content>
            <div class="show">
                <ColumnNav class="nav" :nav-options="navOptions">
                    <template #rule>
                        <RouterLink to="/main/instruction/rule">游戏规则</RouterLink>
                    </template>
                    <template #card>
                        <RouterLink to="/main/instruction/card">物件一览</RouterLink>
                    </template>
                    <template #achievement>
                        <RouterLink to="/main/instruction/achievement">成就一览</RouterLink>
                    </template>
                    <template #author>
                        <RouterLink to="/main/instruction/author">关于作者</RouterLink>
                    </template>
                </ColumnNav>
                <div class="content">
                    <RouterView></RouterView>
                </div>
            </div>
        </template>
    </Dialog>
</template>

<script lang="ts" setup>
import Dialog from '@/components/ui/dialog.vue';
import ColumnNav from '@/components/ui/column-nav.vue';
import router from '@/router';
import { NavOptions } from '@/types/ui';
import { reactive, watch } from 'vue';
const navOptions = reactive<NavOptions>({
    options: [
        { name: "rule" },
        { name: "card" },
        { name: "achievement" },
        { name: "author" }
    ],
    commonOptions: {
        color: "rgb(205,92,92)",
        bgColor: "rgb(90,130,100)",
        size: "min(3vw,40px)",
        expandClick: true
    },
    chosen: ""
});
watch(() => router.currentRoute.value.path, currentValue => {
    const pathList = currentValue.split("/");
    navOptions.chosen = pathList[pathList.length - 1]
}, { immediate: true })
</script>

<style scoped>
.header {
    font-size: min(42px, 6vh);
}

.show {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: auto;
}

.content {
    width: 75%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: rgb(128, 128, 128, 0.8);
    background-clip: padding-box;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.nav {
    width: 25%;
    height: 100%;
    padding: 1vh 1vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: rgb(128, 128, 128, 0.5);
    background-clip: padding-box;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
</style>